<template>
    <div ref="editorComp" class="editorComp">
        <i
            v-if="isMaximum"
            class="el-icon-rank icon"
            title="点击缩小"
            @click="minEditor"
        ></i>
        <i
            v-else
            class="el-icon-full-screen icon"
            title="点击放大"
            @click="maxEditor"
        ></i>
        <monaco-editor
            ref="monacoEditor"
            v-model="code"
            :read-only="disabled"
            :language="language"
            :options="options"
            :height="height"
        ></monaco-editor>
    </div>
</template>
<script>
import MonacoEditor from "@/utils/monaco-editor";
export default {
    components: { MonacoEditor },
    data() {
        return {
            code: "",
            options: {
                minimap: {
                    enabled: false // 不要小地图
                },
                overviewRulerBorder: true, // 不要滚动条的边框
                fontSize: 12,
                lineNumbers: true, // 是否显示行数
                glyphMargin: true,
                contextmenu: true,
                scrollBeyondLastLine: true
                // tabSize: 40, // tab 缩进长度
                // foldingStrategy: "indentation", // 代码可分小段折叠
                // automaticLayout: false // 自适应布局
            },
            originSize: {
                width: "",
                height: ""
            },
            isMaximum: false
        };
    },
    props: {
        language: {
            type: String,
            default: "javascript"
        },
        disabled: Boolean,
        height: {
            type: [String, Number],
            default: 400
        },
        value: [String, Object, Array]
    },
    watch: {
        code(val) {
            this.$emit("input", val);
        },
        value: {
            handler(val) {
                if (typeof val == "object") {
                    this.code = JSON.stringify(val, null, 4);
                } else {
                    this.code = val || "";
                }
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        maxEditor() {
            this.isMaximum = true;
            let dom = this.$refs.editorComp;
            dom.classList.add("editor-fullscreen");
            this.originSize = {
                width: dom.clientWidth,
                height: dom.clientHeight
            };
            this.$refs.monacoEditor.editor.layout({
                height: document.body.clientHeight,
                width: document.body.clientWidth
            });
        },
        minEditor() {
            this.isMaximum = false;
            let dom = this.$refs.editorComp;
            dom.classList.remove("editor-fullscreen");
            this.$refs.monacoEditor.editor.layout({
                height: this.originSize.height,
                width: this.originSize.width
            });
        }
    }
};
</script>

<style scoped lang="scss">
.dataTransform.editorComp {
    width: 50% !important;
}
.dataTransform.editorComp.editor-fullscreen {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999;
}
.editorComp {
    position: relative;
    width: 100% !important;
    .icon {
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
        color: #fff;
    }
}
.editor-fullscreen {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999;
}
</style>

<style lang="scss">
.editor-fullscreen .monaco_editor_container {
    width: 100% !important;
    height: 100% !important;
}
.monaco-editor {
    width: 100% !important;
    height: 100% !important;
    .monaco-scrollable-element {
        width: calc(100% - 60px) !important;
    }
}
.overflow-guard {
    width: 100% !important;
    height: 100% !important;
}
// .breakpoints {
//     background: red;
//     background: radial-gradient(circle at 3px 3px, white, red);
//     width: 10px !important;
//     height: 10px !important;
//     left: 0px !important;
//     top: 3px;
//     border-radius: 5px;
// }
// .breakpoints-fake {
//     background: rgba(255, 0, 0, 0.2);
//     width: 10px !important;
//     height: 10px !important;
//     left: 0px !important;
//     top: 3px;
//     border-radius: 5px;
// }

// .breakpoints {
//     background: red;
//     width: 10px !important;
//     height: 10px !important;
//     left: 0px !important;
//     top: 3px;
//     border-radius: 5px;
// }

// .breakpoints-fake {
//     background: red;
//     width: 10px !important;
//     height: 10px !important;
//     left: 0px !important;
//     top: 3px;
//     border-radius: 5px;
// }
// .myGlyphMarginClass {
//     background: red;
// }
// .myContentClass {
//     background: lightblue;
// }
</style>
